<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <title>ECharts</title>
	    <script src="echarts.min.js"></script>
	    <script src="dark.js"></script>
	    <link rel="stylesheet" href="bootstrap.min.css">  
		<script src="jquery.min.js"></script>
		<script src="bootstrap.min.js"></script>
		
		
	    <link href="datatables.min.css" rel="stylesheet" type="text/css" />
	    <link href="datatables.bootstrap.css" rel="stylesheet" type="text/css" />
	    <link href="components.min.css" rel="stylesheet" id="style_components" type="text/css" />
	    <link href="plugins.min.css" rel="stylesheet" type="text/css" />
		<script src="jquery.min.js" type="text/javascript"></script>
	    <script src="datatables.min.js" type="text/javascript"></script>
	    <script src="datatables.bootstrap.js" type="text/javascript"></script>
	    <!--<script src="table-datatables-colreorder.min.js" type="text/javascript"></script>-->
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="row clearfix">
				
				<div class="col-md-7 column" >
					<div class="portlet light bordered">
						<div id = "chart1" style="width: 100%; height: 400%;"></div>
			<script>
				var myChart = echarts.init(document.getElementById('chart1'));

				
				yyxyData=[];
				llData=[];
				bsData=[];
				$.ajax({
					url: "time_flow.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						$(data.data).each(function(index,item){
							yyxyData.push(
								item.yyxy
							);
							llData.push(
								item.ll
							);	
							bsData.push(
								item.bs
							);												
						})
					}
				});
				option = {
				    baseOption: {
				        timeline: {
				            // y: 0,
				            axisType: 'category',
				            // realtime: false,
				            // loop: false,
				            autoPlay: false,
//				            bottom:0,
				            top:'bottom',
				            // currentIndex: 2,
				            playInterval: 2000,
							data: [
				                '2002-01-01','2003-01-01','2004-01-01',
				                {
				                    value: '2005-01-01',
				                    tooltip: {
				                        formatter: '{b} GDP达到一个高度'
				                    },
				                    symbol: 'diamond',
				                    symbolSize: 16
				                },
				                '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
				                {
				                    value: '2011-01-01',
				                    tooltip: {
				                        formatter: function (params) {
				                            return params.name + 'GDP达到又一个高度';
				                        }
				                    },
				                    symbol: 'diamond',
				                    symbolSize: 18
				                },
				            ],

				        },
//				         title: {
//				             text: '应用层协议分类计数',
//				             x:'75%',
//				             y:'50'
//				         },
				        tooltip: {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        }				        	
				        },
				        legend: {
				            x: 'center',
				            data: ['TCP', 'UDP'],
				        },
				        calculable : false,
				        grid: [{
				            top: 50,
				            width: '75%',
				            bottom:'18%',
				            left: '5%',
//				            containLabel: true
				        },{
				            top: '55%',
				            width: '15%',
				            left: '85%',
				            bottom:'25%'
//				            containLabel: true				        	
				        }],
				        xAxis: [
				            {
				                type:'category',
//				                axisLabel:{'interval':1},
				                data:['周一','周二','周三','周四','周五','周六','周日'],
				            },{
				            	data:yyxyData,
				            	gridIndex: 1
				            }
				        ],
				        yAxis: [
				            {
				                type: 'value',
//				                name: '流量',
				            },{
				            	gridIndex: 1,
				            	type: 'value',
				            }
				        ],
				        series: [
					        {
					            name: 'TCP',
					            type: 'bar',
					            stack: '总量',
//					            barWidth:'50%',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'insideRight'
					                }
					            },
					            data: [320, 302, 301, 334, 390, 330, 320]
					        },
					        {
					            name: 'UDP',
					            type: 'bar',
//					            barWidth:'50%',
					            stack: '总量',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'insideRight'
					                }
					            },
					            data: [120, 132, 101, 134, 90, 230, 210]
							},
				            {
				                name: '流量占比',
				                type: 'pie',
				                center: ['90%', '25%'],
				                radius: '30%',
				                data:[{name:'TCP',value:45},{name:'UDP',value:24}],
				                label:{
				                	normal: false
				                }
				            },
//				            {
//				            	type:'pie',
//				            	data:[{name:'TCP',value:'36%'},{name:'UDP',value:'74%'}]
//				            },
				            {
				            	type:'bar',
				            	xAxisIndex: 1,
        						yAxisIndex: 1,
        						data:llData,
				            },
				            {
				            	type:'bar',
				            	xAxisIndex: 1,
        						yAxisIndex: 1,
        						data:bsData,
				            }
				        ]
				    },
				};
				myChart.setOption(option);
				</script>
					</div>
				</div>
				<div class="col-md-5 column">
					<div class="portlet light bordered">
						<div class="portlet-title">
							流量明细表
						</div>
						<div class="portlet-body">
							<table class="table table-striped table-bordered table-hover" id="sample_1">
								<thead>
									<tr>
										<th>时间</th>
										<th>远程IP</th>
										<th>本地IP</th>
										<th>远程端口</th>
										<th>本地端口</th>
										<th>网络层协议</th>
										<th>应用层协议</th>
										<th>连接方向</th>	
										<th>流量</th>
										<th>包数</th>											
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>					
				</div>
			</div>
			<!--表格初始化-->
			<script>
				$.getTwoDensionArr=function(dension,len)
					{
						var arr=new Array();
						for(var i=0;i<dension;i++)
						{
							arr[i]=new Array();
							for(var j=0;j<len;j++)
							{
								arr[i][j]="dafault";
							}
						}
						return arr;
					}				
			</script>
			<script>
				flow_table = $.getTwoDensionArr(1,10);
				$(document).ready(function() {
					$('#sample_1').dataTable({
						"destroy": true,
						"data": flow_table,			
						"pageLength": 2,
						"lengthChange": false,
						"info":false,
						 buttons: [
			                { extend: 'print', className: 'btn dark btn-outline' },
			                { extend: 'pdf', className: 'btn green btn-outline' },
			                { extend: 'csv', className: 'btn purple btn-outline ' }
			            ],
			            responsive: true,
						colReorder: {
			                reorderCallback: function () {
			                    console.log( 'callback' );
			                }
			            },
			            "order": [
			                [0, 'asc']
			            ],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
				});
				
				$.ajax({
					url: "flow.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						flow_table = $.getTwoDensionArr(data.data.length,10);
						tmp = [];
						$(data.data).each(function(index,items){
							tmp.push(items.sj);
							tmp.push(items.ycip);
							tmp.push(items.bdip);
							tmp.push(items.ycdk);
							tmp.push(items.bddk);
							tmp.push(items.wlxy);
							tmp.push(items.yyxy);
							tmp.push(items.ljfx);	
							tmp.push(items.ll);
							tmp.push(items.bs);								
							flow_table[index]=tmp;
							tmp=[];
						});
						
					}
				});	
			</script>
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="portlet light bordered">
						<div class="portlet-title">应用层协议分类计数</div>
						<div id="chart2" style="width: 1200px; height:600px;"></div>
						<!--<script>
							var myChart = echarts.init(document.getElementById('chart2'));
					        // 指定图表的配置项和数据
							yyxyData=[];
							llData=[];
							bsData=[];
							$.ajax({
								url: "time_flow.json",
								async: false,//改为同步方式
								type: "GET",
							//	data: { arg: val },
								success: function (data) {
									$(data.data).each(function(index,item){
										yyxyData.push(
											item.yyxy
										);
										llData.push(
											item.ll
										);	
										bsData.push(
											item.bs
										);												
									})
								}
							});
					        var option = {
					            title: {
			//		              text: '安全事件分类统计图'
					            },
					            tooltip: {},
					            xAxis: {
									data:yyxyData
					            },
					            yAxis: {},
					            series: [
					            {
									type:'bar',
									data:llData,
					            },			
					            {
									type:'bar',
									data:bsData,
					            },
					            ]
					        };
					        myChart.setOption(option);
						</script>-->
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
